<template>
	<view class="person-container">
		<TopBar
			left-icon="/static/user.png"
			scan-icon="/static/saoyisao.png"
			menu-icon="/static/menu.png"
			@menu="toggleMenu"
		/>

		<!-- 页面内容：可滚动 -->
		<scroll-view scroll-y class="page-scroll">
			<!-- 顶部问候语 -->
			<view class="greeting">Hello, Greenwear</view>
			<!-- 卡片1：沿用home卡片结构 -->
			<view class="card person-card">
				<view class="card-content">
					<view class="card-left">
						<text class="card-title">Greenwear</text>
						<view class="card-details">
							<text class="detail-item">Premium/Luxury</text>
							<text class="detail-item">MOQ: 100 pcs / style</text>
							<text class="detail-item">Lead time: 1-2 weeks</text>
							<view class="location"><image src="/static/position.png" class="location-img" /><text class="location-text">Portugal</text></view>
						</view>
						<view class="card-actions">
							<image src="/static/share.png" class="action-image" />
							<image src="/static/bookmark.png" class="action-image" />
							<image src="/static/mail.png" class="action-image" />
						</view>
					</view>
					<view class="card-right">
						<image src="/static/p1.png" class="card-image" mode="aspectFit" />
						<view class="rating-container">
							<view class="rating-bar">
								<view class="rating-item grade-a">A</view>
								<view class="rating-item grade-b highlight-b">B</view>
								<view class="rating-item grade-c">C</view>
								<view class="rating-item grade-d">D</view>
								<view class="rating-item grade-e">E</view>
							</view>
						</view>
					</view>
				</view>
				</view>

			<!-- 图表：PRODUCTION 图片 -->
			<view class="section-title">PRODUCTION</view>
            <image src="/static/person/PRODUCTION.png" class="chart-image flat" mode="widthFix" />

			<!-- 图表：INTERACTION 图片 -->
			<!-- <view class="section-title">INTERACTION</view> -->
            <image src="/static/person/INTERACTION.png" class="chart-image flat" mode="widthFix" />

			<!-- ECO-PERFORMANCE 列表 -->
			<view class="section-title">ECO-PERFORMANCE</view>
			<view class="eco-list">
				<view class="eco-row" v-for="(eco, idx) in ecoItems" :key="idx">
					<view class="eco-left">
						<image :src="eco.icon" class="eco-icon" mode="heightFix" />
						<text class="eco-title">{{ eco.title }}</text>
					</view>
					<text class="eco-rank" :class="eco.rankClass">{{ eco.rank }}</text>
				</view>
			</view>
			<text class="more-details">More details</text>
		</scroll-view>

		<!-- 账户菜单组件 -->
		<AccountMenu
			v-if="showMenu"
			:style="{ '--anchor-top': '70px', '--anchor-right': '16px' }"
			@close="closeMenu"
			@select="handleMenuAction"
		/>

		<CustomTabbar active="person" />
	</view>
</template>

<script setup>
import { ref } from 'vue';
import TopBar from '@/components/TopBar.vue';
import AccountMenu from '@/components/AccountMenu.vue';
import CustomTabbar from '@/components/CustomTabbar.vue';

const showMenu = ref(false);

const toggleMenu = () => { showMenu.value = !showMenu.value; };
const closeMenu = () => { showMenu.value = false; };

const handleMenuAction = (action) => {
	closeMenu();
};

// ECO-PERFORMANCE 数据
const ecoItems = ref([
	{ icon: '/static/login/1.png', title: 'Material Circularity', rank: 'Top 12% in regional ranking', rankClass: 'green' },
	{ icon: '/static/login/2.png', title: 'Sustainable Materials', rank: 'Top 5% in regional ranking', rankClass: 'green' },
	{ icon: '/static/login/3.png', title: 'Clean Energy Usage', rank: 'Top 20% in regional ranking', rankClass: 'green' },
	{ icon: '/static/login/4.png', title: 'Water Efficiency', rank: 'Top 50% in regional ranking', rankClass: 'green' },
	{ icon: '/static/login/5.png', title: 'Logistics Impact', rank: 'Top 60% in regional ranking', rankClass: 'red' },
]);
</script>

<style lang="scss">
.person-container { min-height: 100vh; background: linear-gradient(180deg, #d9f0ff 0%, #e9f9ed 100%); }
.page-scroll { margin-top: 60px; }
.greeting { margin: 12px 16px; font-size: 22px; font-weight: 700; color: #0b1e2a; }
.person-card { margin: 16px; border-radius: 15px; background: #fff; box-shadow: 0 4px 15px rgba(0,0,0,.1); }
.chart-card { display: none; }
.chart-image { width: calc(100% - 32px); display: block; margin: 12px 16px; }
.section-title { margin: 12px 24px 4px; font-size: 18px; font-weight: 800; color: #0b1e2a; letter-spacing: 1px; }
.eco-list { margin: 12px 16px 24px; display: flex; flex-direction: column; gap: 16px; }
.eco-row { display: flex; align-items: center; gap: 12px; justify-content: flex-start; padding-right: 24px; }
.eco-left { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 120px; }
.eco-icon { height: 48px; width: 48px; }
.eco-title { font-size: 13px; color: #0b1e2a; white-space: nowrap; }
.eco-rank { font-size: 12px; margin-left: 8px; }
.eco-rank.green { color: #1ca35a; }
.eco-rank.red { color: #e53935; }

/* 复用home卡片的核心样式（如已全局可按需精简） */
.card-content { display: flex; flex-direction: row; align-items: stretch; gap: 12px; padding: 16px; }
.card-left { flex: 1 1 auto; }
.card-title { font-size: 20px; font-weight: bold; color: #000; margin-bottom: 10px; display: block; }
.card-details { margin-bottom: 15px; }
.detail-item { display: block; font-size: 14px; color: #666; margin-bottom: 5px; }
.location { display: flex; align-items: center; margin-top: 5px; }
.location-img { width: 14px; height: 14px; margin-right: 6px; }
.location-text { font-size: 14px; color: #666; }
.card-actions { display: flex; gap: 12px; }
.action-image { width: 18px; height: 18px; }
.card-right { display: flex; flex-direction: row; align-items: center; }
.card-image { width: 152px; height: 100%; border-radius: 10px; object-fit: contain; }
.rating-container { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rating-bar { display: flex; flex-direction: column; gap: 0; }
.rating-item { width: 14px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; color: #fff; border-radius: 2px; box-sizing: border-box; }
.grade-a { background-color: #4CAF50; } .grade-b { background-color: #8BC34A; } .grade-c { background-color: #FFEB3B; } .grade-d { background-color: #FF9800; } .grade-e { background-color: #F44336; }

/* 高亮边框样式 */
.highlight-b { border: 4rpx solid #000 !important; }

.more-details { display: block; margin: 12px 16px 140px; color: #000; text-decoration: underline; font-size: 12px; text-align: right; }
</style>
